<template>
  <div class="live">
    <!-- 直播列表 -->
    <el-container>
      <el-main>
        <div class="control" style="min-height: 542px;">
          <ul class="live-list">
            <li>
              <a href>
                <div class="live-list-top">
                  <img src="../assets/image/zb1.jpeg" alt />
                </div>
                <div class="live-list-bottom">
                  <div class="avatar"></div>
                  <p class="live-info">
                    <span class="text-top">助力零工经济：AION与它的金融科...</span><br>
                    <span class="text-bottom">AionChina</span>
                  </p>
                </div>
              </a>
            </li>
            <li>
              <a href>
                <div class="live-list-top">
                  <img src="../assets/image/zb2.jpeg" alt />
                </div>
                <div class="live-list-bottom">
                  <div class="avatar"></div>
                  <p class="live-info">
                    <span class="text-top">区块链如何在未来承载大规模数据</span><br>
                    <span class="text-bottom">PlatON</span>
                  </p>
                </div>
              </a>
            </li>
            <li>
              <a href>
                <div class="live-list-top">
                  <img src="../assets/image/zb3.jpeg" alt />
                </div>
                <div class="live-list-bottom">
                  <div class="avatar"></div>
                  <p class="live-info">
                    <span class="text-top">从石板经济到数字经济的传承与创新</span><br>
                    <span class="text-bottom">数字经济理论_龙白滔</span>
                  </p>
                </div>
              </a>
            </li>
          </ul>
        </div>
      </el-main>
      <!-- 底部公共部分 -->
      <el-footer>
        <div class="footer">
          <div class="footer-link">
            <a
              target="_blank"
              href="https://home.bihu.com"
              rel="nofollow me noopener noreferrer"
            >关于我们</a>
            <a target="_blank" href="/ContactUs">联系我们</a>
            <a
              target="_blank"
              href="https://home.bihu.com/agreement/HelpCenter.html"
              rel="nofollow me noopener noreferrer"
            >帮助中心</a>
            <a
              target="_blank"
              href="https://home.bihu.com/agreement/index.html"
              rel="nofollow me noopener noreferrer"
            >用户协议</a>
          </div>
          <div class="footer-record">
            <p class="record">
              ©2020 - BIHU.COM All Rights Reserved
              <span>
                无锡巽雷信息科技有限公司&nbsp;
                <a
                  target="_blank"
                  href="http://www.beian.miit.gov.cn/"
                >苏ICP备20006983号-8</a>&nbsp;
              </span>
            </p>
          </div>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<style scoped>
.control {
  width: 1170px;
  margin: 0 auto;
}
.footer {
  width: 100%;
  text-align: center;
  color: #5a6169;
}
.footer .footer-link {
  margin-top: 20px;
}
.footer .footer-link a {
  color: #5a6169;
  padding: 0 40px;
}
.footer .footer-record .record {
  text-align: center;
  font-size: 13px;
  margin-top: 18px;
  padding-bottom: 17px;
  color: #5a6169;
}
.footer .footer-record .record span {
  display: block;
  margin-top: 10px;
  color: #5a6169;
}
.footer .footer-record .record a {
  font-size: 11px;
  color: #5a6169;
}
.live-list {
  display: flex;
  margin-left: 35px;
}
.live-list li {
  width: 320px;
  height: 196px;
  margin: 15px;
  overflow: hidden;
  background: #fff;
}
.live-list-top img {
  width: 320px;
  height: 140px;
}
.live-list-top p {
  position: absolute;
  right: 5px;
  top: 5px;
  padding: 3px 9px;
  background: #5187ff;
}
.avatar {
  width: 40px;
  height: 40px;
}
.live-list-bottom {
  display: flex;
  width: 320px;
  height: 60px;
}
.live-list-bottom p .text-top{
  font-size: 16px;
  color: #333;
}
.live-list-bottom p .text-bottom{
  font-size: 12px;
  color: #333;
}
.live-info{
    margin-left: 6px;
    margin-top: 5px;
}
</style>
